<template>
    <div class="container">
        <div class="header">
            <h3>活动留言</h3>
            <el-form :model="queryForm"
                     label-width="80px"
                     class="demo-ruleForm"
                     :inline="true">
                <el-form-item label="活动名称:">
                    <el-select v-model="queryForm.activityId"
                               clearable
                               @change="querySelectChange"
                               placeholder="请选择活动">
                        <el-option v-for="item in activityArr"
                                   :label="item.name"
                                   :value="item.id"
                                   :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间:">
                    <el-date-picker v-model="dateTimes"
                                    type="datetimerange"
                                    range-separator="至"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    @change="renderMsgDate"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="search">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content">
            <el-table :data="tableData"
                      ref="multipleTable"
                      tooltip-effect="dark"
                      border
                      style="width: 100%"
                      class="table"
                      @selection-change="handleSelectionChange">
                <el-table-column prop="id"
                                 label="#ID"
                                 width="50">
                </el-table-column>
                <el-table-column prop="activityName"
                                 label="活动名称"
                                 width="180">
                </el-table-column>
                <el-table-column prop="userPhoneNum"
                                 label="用户账号"
                                 width="120">
                </el-table-column>
                <el-table-column prop="message"
                                 label="留言内容">
                </el-table-column>
                <el-table-column prop="messageTime"
                                 label="留言时间"
                                 :formatter="timeFormat"
                                 width="177.5">
                </el-table-column>
                <el-table-column prop="status"
                                 label="状态"
                                 width="180">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.isShow ? "显示" :"未显示"}}</el-tag>
                        <el-button class="btn1"
                                   @click='Show(scope.row, scope.$index)'>操作
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="phoneNum"
                                 label="操作"
                                 width="100">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   @click='deleteAll(scope.row, scope.$index)'
                                   class="btn">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <el-pagination @size-change="handleSizeChange"
                           :total="total"
                           :page-size='pageSize'
                           :current-page.sync="currentPageNum"
                           @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {parseTime} from '@/utils/index'

    export default {
        name: 'Message',
        data() {
            return {
                queryForm: {
                    activityId: ''
                },
                // 下拉框信息
                dateTimes: '',
                pageSize: 10,
                pageNum: 0,
                tableData: [],
                total: 1,
                currentPageNum: 1,
                beginTime: '',
                endTime: '',
                activityArr: []
            }
        },
        mounted() {
            // 下拉框数据
            this.dataViewone();
            this.dataView();
        },
        watch: {
            pageNum() {
                this.currentPageNum = this.pageNum + 1;
            }
        },
        methods: {
            timeFormat(row, column) {
                const date = row[column.property]
                return parseTime(date)
            },
            // 接受数据
            dataViewone() {
                const _this = this
                _this.axios({
                    url: '/activityConsole/activityMessage/getActivityName'
                }).then(res => {
                    _this.activityArr = res.data.data
                    console.log(_this.activityArr)
                }).catch(err => {
                    console.log(err)
                })
            },
            querySelectChange() {
                this.pageNum = 0;
            },
            // 接受数据
            dataView() {
                const that = this
                that.axios.get('/activityConsole/activityMessage/getMessage', {
                    params: {
                        activityId: that.queryForm.activityId,
                        beginTime: that.beginTime,
                        endTime: that.endTime,
                        pageNum: that.pageNum,
                        pageSize: that.pageSize
                    }
                }).then(function (res) {
                    console.log(res)
                    if (res.data.status == '200') {
                        that.tableData = res.data.data
                        that.total = parseInt(res.data.description)
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            // 删除
            deleteAll(row) {
                console.log('删除')
                console.log(row)
                let that = this
                that.axios({
                    url: '/activityConsole/activityMessage/delMessage',
                    method: 'post',
                    params: {
                        id: row.id
                    }
                }).then(res => {
                    console.log(res)
                    let {tableData} = this
                    tableData = tableData.filter(item => row.id !== item.id)
                    this.tableData = tableData
                    that.$message({
                        type: 'success',
                        message: res.data.description
                    })
                }).catch(err => {
                    console.log(err)
                    that.$message({
                        type: 'error',
                        message: err.data.description
                    })
                })
            },
            // 显示未显示
            Show(row) {
                let _this = this
                _this.axios({
                    url: '/activityConsole/activityMessage/showMessage',
                    method: 'post',
                    params: {
                        id: row.id,
                        type: row.isShow ? 0 : 1
                    }
                }).then(function (res) {
                    console.log(res)
                    if (res.status == '200') {
                        row.isShow = row.isShow ? 0 : 1
                        _this.$message({
                            type: 'success',
                            message: res.data.description
                        })
                    } else {
                        _this.$message({
                            type: 'info',
                            message: res.data.description
                        })
                    }
                }).catch(function (error) {
                    console.log(error)
                    _this.$message({
                        type: 'error',
                        message: error.data.description
                    })
                })
            },
            search() {
                this.dataView();
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.pageNum = parseInt(val) - 1
                this.dataView(this.pageNum)
            },
            renderMsgDate() {
                this.beginTime = this.dateTimes[0]
                this.endTime = this.dateTimes[1]
            },
            handleSelectionChange(val) {
                console.log(val)
            }
        }
    }
</script>
<style scoped>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    .container {
        width: 100%;
        height: 100%;
    }

    h3 {
        margin-bottom: 30px;
    }

    .header {
        width: 100%;
        height: 140px;
    }

    .content {
        width: 100%;
    }

    .footer {
        margin-top: 10px;
        text-align: center;
    }

    .btn1 {
        float: right;
        margin-right: 10px;
    }

    .el-button.btn1.el-button--default {
        background-color: #21baa9;
        color: #fff;
    }
</style>
